<template>
  <div class="home">
    <main-nav-bar />
    <!-- 轮播图 -->
<!--      
    <el-carousel height="100vh" trigger="click" :interval="4000" type="card">
      <el-carousel-item v-for="(item, index) in carouseList" :key="index">
        <img class="w-100 h-100" :src="item" alt />
      </el-carousel-item>
    </el-carousel> -->
    <el-carousel height="100vh" trigger="click" :interval="4000"  >
      <el-carousel-item >
        <img class="w-100 h-100" src="../assets/fdsfsdf.png" alt />
      </el-carousel-item>
      <el-carousel-item >
        <img class="w-100 h-100" src="../assets/3.png" alt />
      </el-carousel-item>
      <el-carousel-item > 
        <img class="w-100 h-100" src="../assets/111.png" alt />
      </el-carousel-item>
      <el-carousel-item >
        <img class="w-100 h-100" src="../assets/1.png" alt />
      </el-carousel-item>
       <el-carousel-item >
        <img class="w-100 h-100" src="../assets/2222.png" alt />
      </el-carousel-item>
       <el-carousel-item >
        <img class="w-100 h-100" src="../assets/333.png" alt />
      </el-carousel-item>
       <el-carousel-item >
        <img class="w-100 h-100" src="../assets/444.png" alt />
      </el-carousel-item>
    </el-carousel>
    

    <!-- section1-->
    <!-- <titles> -->
    <!-- 标题 -->
    <!-- <small class="d-inline-block fs-6 mt-2 px-1 py-1" slot="small">
        List of Campus Celebrities
      </small>
    <h1 slot="h1">校园名人榜</h1>-->
    <!-- 内容-->
    <!-- <template v-slot:sectionBody>
        <div
          class="row row-cols-1 row-cols-md-2 row-cols-lg-3 d-flex justify-content-cneter aligin-items-center"
        >
           
          <div
            class="col mt-5 d-flex justify-content-center align-items-center"
            v-for="(item, index) in carInfoList"
            :key="index"
          >
            <a style=" text-decoration: none;" @click="cardClick(item)">
              <card>
                <img :src="item.img" slot="img" alt="" />
                <h5
                  class="card-title text-center fw-bold  my-transition"
                  slot="card-title"
                >
                  {{ item.name }}
                </h5>
                <p
                  class="card-text text-center fw-normal  my-transition  overflow"
                  slot="card-text"
                >
                  {{ item.desc }}
                </p>
              </card>
            </a>
          </div>
        </div>
      </template>
    </titles>-->

    <!-- 校园风景 -->
    <!-- <titles>
      <small class="d-inline-block fs-6 mt-2 px-1 py-1" slot="small">
        Campus Scenery
      </small>
      <h1 slot="h1">
        校园风景
      </h1>
      <template v-slot:sectionBody>
        <div class="row">
          <select-car></select-car>
        </div>
      </template>
    </titles>-->
    <!-- 校园公告栏 -->
    <!-- <titles>
      <small class="d-inline-block fs-6 mt-2 px-1 py-1" slot="small">
        Campus Bulletin Board
      </small>
      <h1 slot="h1">
        校园公告栏
      </h1>
      <template v-slot:sectionBody>
        <div class="row pt-5 row row-cols-1 row-cols-lg-2">
          <div
            class="col my-2"
            v-for="(item, index) in noticeList"
            :key="index"
          >
            <div class="card hvr-float-shadow" style="    border-radius: 12px;">
              <div class="card-body">
                <blockquote class="blockquote">
                  <h4>{{ item.title }}</h4>
                  <p class="content" style="font-weight:400;">
                    {{ item.content }}
                  </p>
                  <footer class="card-blockquote text-end">
                    <p title="Source title">发表人:{{ item.userName }}</p>

                    <p title="Source title">
                      发表时间：{{ item.time | formatDate }}
                    </p>
                  </footer>
                </blockquote>
              </div>
            </div>
          </div>
        </div>
      </template>
    </titles>-->
  </div>
</template>

<script>
import Titles from '@/components/Titles.vue'
import Card from '@/components/Card.vue'
import Login from '@/common/Login.vue'
import MainNavBar from '@/common/NavBar/MainNavBar.vue'
import selectCar from '@/common/selectCar.vue'
import formatDateTimes from '@/assets/Tools/date2.js'

export default {
  name: 'home',

  components: {
    Titles,
    Card,
    Login,
    MainNavBar,
    selectCar,
  },
  data() {
    return {
      carInfoList: [], //卡片信息
      noticeList: [], // 公告
      carouseList: [
        'https://gitee.com/llvyr/img/raw/master/img/3.png',
        'http://www.fit.edu.cn/images/up_images/20200417112512351.jpg',
        'http://www.fit.edu.cn/images/up_images/20200417112432087.jpg',
        'http://www.fit.edu.cn/images/up_images/20200417111946637.jpg',
        'http://www.fit.edu.cn/images/up_images/20200417112432087.jpg',
        'http://www.fit.edu.cn/images/up_images/20200417111946263.jpg',
        'http://www.fit.edu.cn/images/up_images/20200311090008186.jpg',
        'http://www.fit.edu.cn/images/up_images/20200311091058435.jpg',
      ], //轮播图图片
    }
  },
  created() {
    this.getCardInfoList()
    this.getNoticeList()
  },
  filters: {
    // 发表时间格式化
    formatDate(val) {
      return formatDateTimes.formatDateTime(val)
    },
  },
  methods: {
    cardClick(item) {
      // 动态获取
      this.$router.push({
        path: '/celebrity',
        query: {
          id: item.id,
          name: item.name,
          age: item.age,
          src: item.img,
          desc: item.desc,
          time: item.time,
          mainStory: item.mainStory,
          saying: item.saying,
        },
      })
    },
    async getCardInfoList() {
      const data = await this.$http.get('/home/cardInfo')
      if (data.code == 200) {
        this.carInfoList = data.data
      }
      console.log(this.carInfoList)
    },
    async getNoticeList() {
      const data = await this.$http.get('/home/getNotice')
      if (data.code == 200) {
        this.noticeList = data.data
      }
    },
  },
}
</script>
<style lang="less" scoped>
.home {
  margin-top: 6.25rem;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.el-carousel__container {
  height: 25rem !important;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.login {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%);
}
.blockquote p {
  font-weight: 400 !important;
  font-size: 14px;
}
.blockquote p.content {
  font-size: 18px;
}
</style>
